<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<!--<link rel="stylesheet" href="/css/layui.css" >-->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">

<body>
    <!-- 顶部导航 -->

    <!-- navbanner begin-->
    <header th:include="cultivateWeb/header :: header"></header>
    <style>
        a {
            cursor: pointer
        }
    </style>
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 培训课程</p>
    </div>

    <section>
        <div class="layui-container bt50">
            <!-- 筛选 -->
            <div class="filter bt50">
                <div class="list-item clearfix">
                    <div class="list-title">证书</div>
                    <ul class="list-ul" id="categoryList">
                    </ul>
                    <input type="hidden" value="" id="category">
                </div>
            </div>
        </div>
        <!-- 全部课程 -------------------------------------------------------------- -->
        <div class="container">
            <div class="row">
                <div class="layui-container bt50">
                    <input type="hidden" id="name" th:value="${name}" />
                    <div class="title">
                        全部课程
                    </div>
                    <div class="rmtjkc aa col-xs-12">
                        <div class="xianshi">
                            <div class="qiehuan active">
                                <ul class="clear" id="course">
                                </ul>
                            </div>
                            <div id="page" class="page"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- footer ------------------------------------------------------- -->
    <div class="footer" th:include="cultivateWeb/header :: footer">
    </div>
    <script type="text/javascript" src="/js/xlPaging.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <style>
        .nm {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <script>
        $(function () {
            var userName = window.localStorage.getItem("userName");
            var unreadNum = window.localStorage.getItem("unreadNum0");
            if (userName != "" && userName != null) {
                $("#user").text(userName);
                $('.yes').css("display", "inline");
                if (unreadNum != 0 && unreadNum != null && unreadNum != '') {
                    $(".bubble").css("display", "inline");
                    $(".bubble").html(unreadNum)
                }
            }
            //证书数据
            selProfileFill();
            //课程数据
            getCourse($("#name").val(), "")

        });

        function getCourse(name, profileId) {

            $.ajax({
                url: "/jzApi/courses/selCourseList",
                type: 'GET',
                data: {
                    name: name,
                    profileId: profileId,
                    current: 1,
                    number: 50
                },
                beforeSend: function (request) {
                    request.setRequestHeader("Authorization", window.localStorage.getItem("token") || '')
                },
                success: function (res) {
                    if (res.data.pages == 0) {
                        $("#course").html('<div class="noData" style="font-size: 16px">暂无数据</div>');
                    } else {
                        var list = res.data.records;
                        var course = '';
                        list.forEach(function (item, index) {
                            var a = '', b = '';
                            if (item.specialPrice != 0) {
                                a = '¥' + item.specialPrice
                            } else {
                                // a = '免费'
                                a = ''
                            }
                            if (item.type == 0) {
                                b = '<span class="abSpan orangeSpan">证书课程</span>'
                            } else if (item.type == 1) {
                                b = '<span class="abSpan greenSpan">师资培训课程</span>'
                            } else if (item.type == 2) {
                                b = '<span class="abSpan greenSpan">考评员培训课程</span>'
                            } else if (item.type == 3) {
                                b = '<span class="abSpan greenSpan">高级师资培训课程</span>'
                            } else if (item.type == 4) {
                                b = '<span class="abSpan greenSpan">高级考评员培训课程</span>'
                            } else if (item.type == 5) {
                                b = '<span class="abSpan greenSpan">金职大讲堂</span>'
                            } else if (item.type == 6) {
                                b = '<span class="abSpan greenSpan">技能培训</span>'
                            } else if (item.type == 7) {
                                b = '<span class="abSpan greenSpan">基础课程</span>';
                            } else if (item.type == 8) {
                                b = '<span class="abSpan greenSpan">实践性课程</span>';
                            }
                            course += '<li><a href="/couInfo/couInfo?id=' + item.id + '">' +
                                '<div style="position: relative"><img class="courseimg" src="' + item.thumbnail + '" alt="图片">' + b + '</div>' +
                                '<div>' +
                                '<span style="color:#fe7252">浏览：' + item.browseNum + '</span>' +

                                '<h1 class="nm">' + item.name + '</h1>' +
                                '<h2>' +
                                '<span class="red lf">' + a + '</span>' +
                                '<span class="rt" style="color: #666">讲师：' + item.teacherName + '</span>' +
                                '</h2>' +
                                '</div>' +
                                '</a></li>'
                        });
                        $("#course").html(course);
                        page(1, res.data.pages, name, profileId);
                    }
                }
            });
        }

        function selProfileFill() {
            $.ajax({
                url: "/jzApi/certificates/selProfileFill",
                type: 'GET',
                data: {},
                success: function (res) {

                    if (!res.data) {
                        $("#categoryList").html('<div class="noData">暂无数据</div>');
                    } else {
                        var list = res.data;
                        var categoryList = '<li><a class="list-this" onclick="getCourse(\'' + "" + '\',' + '\'' + "" + '\')">全部</a></li>';
                        list.forEach(function (item, index) {
                            categoryList += '<li><a class="list" onclick="getCourse(\''
                                + "" + '\',' + '\''
                                + item.id + '\')">' + item.name + '</a></li>'
                        });
                        $("#categoryList").html(categoryList);
                    }
                }
            });
        }

        $("#categoryList").on("click", ".list", function (res) {
            $(this).addClass("list-this");
            $(this).parent("li").siblings().find("a").removeClass("list-this")
            // console.log("222",$(this).addClass(list-this))
        });

        function page(num, tolPages, name, profileId) {
            $("#page").paging({
                nowPage: Number(num), // 当前页码
                pageNum: Number(tolPages), // 总页码
                buttonNum: 50, //要展示的页码数量
                canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
                showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
                callback: function (num) { //回调函数
                    $.ajax({
                        url: "/jzApi/courses/selCourseList",
                        type: 'GET',
                        data: {
                            name: name,
                            profileId: profileId,
                            current: 1,
                            number: 50
                        },
                        beforeSend: function (request) {
                            request.setRequestHeader("Authorization", window.localStorage.getItem("token") || '')
                        },
                        success: function (res) {
                            var list = res.data.records;
                            var news = '';
                            list.forEach(function (item, index) {
                                var a = '', b = '';
                                if (item.specialPrice != 0) {
                                    a = '¥' + item.specialPrice
                                } else {
                                    a = '免费'
                                }
                                if (item.type == 0) {
                                    b = '<span class="abSpan orangeSpan">证书课程</span>'
                                } else if (item.type == 1) {
                                    b = '<span class="abSpan greenSpan">师资培训课程</span>'
                                } else if (item.type == 2) {
                                    b = '<span class="abSpan greenSpan">考评员培训课程</span>'
                                } else if (item.type == 3) {
                                    b = '<span class="abSpan greenSpan">高级师资培训课程</span>'
                                } else if (item.type == 4) {
                                    b = '<span class="abSpan greenSpan">高级考评员培训课程</span>'
                                } else if (item.type == 5) {
                                    b = '<span class="abSpan greenSpan">金职大讲堂</span>'
                                } else if (item.type == 6) {
                                    b = '<span class="abSpan greenSpan">技能培训</span>'
                                } else if (item.type == 7) {
                                    b = '<span class="label label-primary">基础课程</span>';
                                } else if (item.type == 8) {
                                    b = '<span class="label label-primary">实践性课程</span>';
                                }
                                if (item.thumbnail != '' && item.thumbnail != null) {
                                    a = '<img style="width: 180px;height: 110px" src="' + item.thumbnail + '" />'
                                } else {
                                    a = '<div class="bg_green">' + name + '</div>'
                                }
                                news += '<li><a href="/couInfo/couInfo?id="' + item.id + '>' +
                                    '<div style="position: relative"><img src="' + item.thumbnail + '" alt="图片">' + b + '</div>' +
                                    '<div>' +
                                    '<span style="color:#fe7252">浏览：' + item.browseNum + '</span>' +
                                    '<h1 class="nm">' + item.name + '</h1>' +

                                    '<h2>' +
                                    '<span class="red lf">' + a + '</span>' +
                                    '<span class="rt" style="color: #666">讲师：' + item.teacherName + '</span>' +
                                    '</h2>' +
                                    '</div>' +
                                    '</a></li>'
                            });
                            news += '<div style="clear: both"></div>';
                        }
                    });
                }
            });
        }
    </script>

</body>

</html>